<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>包装机</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
      }
      body {
        overflow: hidden;
      }
      .container {
        width: 100%;
        height: 100%;
        position: relative;
      }
      iframe {
        width: 100%;
        height: 100%;
      }
      .u2495 {
        position: absolute;
        left: 35px;
        top: 140px;
        width: 250px;
        height: 205px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2495.svg) no-repeat;
      }
      .u2496 {
        position: absolute;
        left: 1200px;
        top: 47px;
        width: 250px;
        height: 205px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2495.svg) no-repeat;
      }
      .u2475 {
        position: absolute;
        left: 347px;
        top: 200px;
        width: 250px;
        height: 114px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2475.svg) no-repeat;
      }
      .u2476 {
        position: absolute;
        left: 827px;
        top: 310px;
        width: 250px;
        height: 114px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2475.svg) no-repeat;
      }
      .u2495 > .title,
      .u2496 > .title,
      .u2475 > .title,
      .u2476 > .title {
        height: 30px;
        background: url(./images/packer/u2495-t.svg) no-repeat;
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        line-height: 30px;
      }
      .u2457 {
        position: absolute;
        left: 608px;
        top: 140px;
        width: 323px;
        height: 158px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2457.svg) no-repeat;
      }
      .u2457 > .title {
        height: 30px;
        background: url(./images/packer/u2457-t.svg) no-repeat;
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        line-height: 30px;
      }
      .title::after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 9px;
        position: absolute;
        top: 10px;
        right: 12px;
        background: url(./images/packer/u3.svg) no-repeat;
      }
      .list-col {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 10px 15px;
      }
      .list-col > .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .list-row {
        flex: 1;
        height: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 10px 15px;
        gap: 10px;
      }
      .list-row > .list-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        width: 0;
      }
      .list-item > .name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .list-item > .value {
        font-size: 18px;
        color: rgba(102, 187, 249);
      }
      .list-col > .list-row {
        padding: 0;
      }
      .list-col > .list-row > .list-item {
        flex: 1;
      }

      .u2444 {
        position: absolute;
        right: 2px;
        bottom: 50px;
        width: 451px;
        height: 280px;
        display: flex;
        flex-direction: column;
        opacity: 0.83;
        color: #ffffff;
        background: url(./images/packer/u2444.svg) no-repeat;
      }
      .u2444 > .title {
        height: 40px;
        background: url(./images/packer/u2444-t.svg) center center no-repeat;
        position: relative;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
      }
      .u2444 > .title::after {
        content: "";
        width: 0;
        height: 0;
        background: none;
      }
      .u2444 .list-col {
        padding: 10px 70px;
      }
      .u2444 .list-item > .name {
        font-size: 20px;
      }
      .u2444 .list-item > .value {
        font-size: 28px;
      }
      video{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video
        allowfullscreen="true"
        x5-video-player-fullscreen="true"
        id="video"
      ></video>
      <div class="u2495">
        <div class="title">卷筒包装机-搁纸架</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">包装纸一直径</div>
            <div class="value K8">-</div>
          </div>
          <div class="list-item">
            <div class="name">包装纸二直径</div>
            <div class="value K9">-</div>
          </div>
          <div class="list-item">
            <div class="name">包装纸三直径</div>
            <div class="value K10">-</div>
          </div>
          <div class="list-item">
            <div class="name">包装纸四直径</div>
            <div class="value K11">-</div>
          </div>
        </div>
      </div>
      <div class="u2496">
        <div class="title">卷筒包装机-热压盘</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">热压合前盘面温度</div>
            <div class="value frontTemp">-</div>
          </div>
          <div class="list-item">
            <div class="name">热压合后盘面温度</div>
            <div class="value backTemp">-</div>
          </div>
          <div class="list-item">
            <div class="name">热压盘翻转次数</div>
            <div class="value K53">-</div>
          </div>
          <div class="list-item">
            <div class="name">热压盘压合次数</div>
            <div class="value K54">-</div>
          </div>
        </div>
      </div>
      <div class="u2475">
        <div class="title">卷筒包装机-大臂</div>
        <div class="list-row">
          <div class="list-item">
            <div class="name">折边前大臂升降</div>
            <div class="value K29">-</div>
          </div>
          <div class="list-item">
            <div class="name">折边后大臂升降</div>
            <div class="value K30">-</div>
          </div>
        </div>
      </div>
      <div class="u2476">
        <div class="title">卷筒包装机-小臂</div>
        <div class="list-row">
          <div class="list-item">
            <div class="name">折边前小臂升降</div>
            <div class="value K31">-</div>
          </div>
          <div class="list-item">
            <div class="name">折边后小臂升降</div>
            <div class="value K32">-</div>
          </div>
        </div>
      </div>
      <div class="u2457">
        <div class="title">卷筒包装机-折边工位</div>
        <div class="list-col">
          <div class="list-row">
            <div class="list-item">
              <div class="name">总数量</div>
              <div class="value K2">-</div>
            </div>
            <div class="list-item">
              <div class="name">当前节拍</div>
              <div class="value K3">-</div>
            </div>
            <div class="list-item">
              <div class="name">最高节拍</div>
              <div class="value K4">-</div>
            </div>
          </div>
          <div class="list-row">
            <div class="list-item">
              <div class="name">工作百分比</div>
              <div class="value K5">-</div>
            </div>
            <div class="list-item">
              <div class="name">折边时间</div>
              <div class="value K6">-</div>
            </div>
            <div class="list-item">
              <div class="name">最小时间</div>
              <div class="value K7">-</div>
            </div>
          </div>
        </div>
      </div>
      <div class="u2444">
        <div class="title">2020Z028-3-W03#PM1</div>
        <div class="list-col">
          <div class="list-item">
            <div class="name">设备状态</div>
            <div class="value Condition">-</div>
          </div>
          <div class="list-item">
            <div class="name">总包装数量</div>
            <div class="value Yield">-</div>
          </div>
          <div class="list-item">
            <div class="name">当前节拍</div>
            <div class="value K0">-</div>
          </div>
          <div class="list-item">
            <div class="name">最高节拍</div>
            <div class="value K1">-</div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/ezuikit.js"></script>
    <script src="./js/dv.js"></script>
  </body>
</html>
